<template>
	<view class="salon-page">
		<!-- 加载动画 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-spinner">
				<view class="spinner"></view>
			</view>
			<view class="loading-text">加载中...</view>
		</view>
		
		<!-- 内容区域 -->
		<view v-else>
			<!-- 顶部信息 -->
			<view class="salon-header">
				<image @click="$timer.preView([item.activity.pic])" class="salon-banner" :src="item.activity.pic"
					mode="widthFix" />
				<view class="salon-title">{{item.title || ''}}</view>
				<view class="salon-info">
					<text class="salon-info-item">浏览人数：<text class="salon-info-highlight">{{item.number || 0}}</text></text>
					<text v-if="item.activity" class="salon-info-item">
						时间：{{$timer.formatTime(item.activity.start_time,'yyyy年mm月dd日') || ''}}-{{$timer.formatTime(item.activity.end_time,'yyyy年mm月dd日') || ''}}</text>
				</view>
				<view class="salon-address">主办单位：{{item.unit || ''}}</view>
				<view class="salon-address">沙龙地点：{{item.address || ''}}</view>
				<view style="height: 10rpx;"></view>
			</view>
			<!-- 瀑布流图片展示 -->
			<view class="salon-gallery">
				<view class="gallery-col">
					<view class="gallery-item" v-for="(img, idx) in leftImages" :key="img.url" @click="clickPreView(img)">
						<image :show-menu-by-longpress="true" :src="img.url" mode="widthFix" class="gallery-img" />
					</view>
				</view>
				<view class="gallery-col">
					<view class="gallery-item" v-for="(img, idx) in rightImages" :key="img.url" @click="clickPreView(img)">
						<image :show-menu-by-longpress="true" :src="img.url" mode="widthFix" class="gallery-img" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import index from "../components/uview-ui"
	import {
		getActivityImages
	} from "@/api/extend.js"
	export default {
		data() {
			return {
				item: {},
				options: {},
				imgs: [],
				loading: true, // 加载状态
			}
		},
		computed: {
			leftImages() {
				return this.imgs.filter((_, i) => i % 2 === 0)
			},
			rightImages() {
				return this.imgs.filter((_, i) => i % 2 === 1)
			}
		},
		onLoad(options) {
			this.options = options;

			uni.$on('loginTrigger', () => { // 登录后操作
				this.getActivityImagesFunc()
			})

			this.getActivityImagesFunc();
		},
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: '沙龙精彩瞬间',
				imageUrl: '',
				path: '/pages/extend/index/salon_pic?id=' + (that.options.id || -1)
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: '沙龙精彩瞬间',
				query: {
					id: that.options.id
				},
				imageUrl: ''
			};
		},
		methods: {

			clickPreView(img) {
				uni.previewImage({
					urls: this.imgs.map(item => item.url),
					current: img.index
				})
			},

		getActivityImagesFunc() {
			this.loading = true; // 开始加载
			getActivityImages({
				activity_id: this.options.id
			}).then(res => {

				if (this.$timer.isEmpty(res.data)) {
					// this.loading = false; // 加载完成
					uni.showToast({
						title: '还未上传精彩时刻图片,请耐心等待',
						icon: 'none',
						duration: 4000
					})
					setTimeout(() => {
						uni.navigateBack({
							fail() {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						});
					}, 2000)
					return
				}

				this.item = res.data;
				if (res.data.images.length > 0) {

					let arr = (res.data.images + '').split(',');

					this.imgs = arr.map((item, index) => {
						return {
							url: this.$timer.ensureUrl(item),
							index: index
						}
					});
				}
				
				this.loading = false; // 加载完成

			}).catch(err => {
				this.loading = false; // 加载失败也要关闭loading
			})
		},

		}
	}
</script>

<style scoped lang="scss">
	.salon-page {
		background: #f7f7f7;
		min-height: 100vh;
	}

	.salon-header {
		background: #fff;
		padding: 24rpx 24rpx 0 24rpx;
		border-radius: 0 0 24rpx 24rpx;
		box-shadow: 0 2rpx 8rpx #eee;
	}

	.salon-banner {
		width: 100%;
		// border-radius: 6rpx;
		margin-bottom: 16rpx;
	}

	.salon-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #b71c1c;
		margin-bottom: 12rpx;
	}

	.salon-info {
		display: flex;
		align-items: center;
		gap: 24rpx;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.salon-info-highlight {
		color: #e53935;
		font-weight: bold;
	}

	.salon-gallery {
		display: flex;
		flex-direction: row;
		gap: 16rpx;
		padding: 24rpx;
	}

	.gallery-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.gallery-item {
		width: 100%;
		// border-radius: 12rpx;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 2rpx 8rpx #eee;
	}

	.gallery-img {
		width: 100%;
		height: 320rpx;
		object-fit: cover;
		display: block;
	}

	.salon-address {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 16rpx;
		margin-top: -8rpx;
		word-break: break-all;
	}

	/* 加载动画样式 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.loading-spinner {
		margin-bottom: 24rpx;
	}

	.spinner {
		width: 80rpx;
		height: 80rpx;
		border: 6rpx solid #f3f3f3;
		border-top: 6rpx solid #e53935;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 28rpx;
		color: #999;
	}
</style>